<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>部门列表</title>
    <!-- 引入jquery   -->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <!-- 定义方法 -->

    <script>
        /*
   功能：打开新得浏览器窗口并居中显示
   参数：
       url:需要打开的url地址
       name:打开的窗口名称，可以为null
       customWidth:窗口的宽度
       customHeight:窗口的高度
*/

        function openNewWindow(url, name, customWidth, customHeight) {
            console.log("customWidth：" + customWidth);
            console.log("customHeight：" + customHeight);
            console.log("window.screen.width:" + screen.width);
            console.log("window.screen.height:" + screen.height);
            // 设置宽高的默认值，没有传入自定义的窗口宽和高时：
            if (!customWidth) {
                console.log("测试是否传入自定义宽度：");
                customWidth = window.screen.width / 1.5;
                console.log("customWidth：" + customWidth);

            }
            // 设置宽高的默认值，没有传入自定义的窗口宽和高时：
            if (!customHeight) {
                console.log("测试是否传入自定义高度：");
                customHeight = window.screen.height / 1.5;
                console.log("customHeight：" + customHeight);
            }
            //window.screen.height获得屏幕的高，window.screen.width获得屏幕的宽
            var iTop = (window.screen.height - 30 - customHeight) / 2; //获得窗口的垂直位置;
            var iLeft = (window.screen.width - 10 - customWidth) / 2; //获得窗口的水平位置;

            console.log("iTop:" + iTop);
            console.log("iLeft:" + iLeft);
            // 拼接窗口位置参数
            var window_param_str = 'height=' + customHeight + ',width=' + customWidth + ',top=' + iTop + ',left=' + iLeft;

            window.open(url, name, window_param_str);
        }
    </script>
    <!--  jquery页面处理脚本  -->
    <script>
        // 从请求参数中获取值
        let search = location.search.substr(1);
        // 查看get请求参数
        console.log(search);
        var search_json = {};

        var arr = search.split('&');
        var temp;
        for (var string of arr) {
            temp = string.split('=');
            console.log(temp);
            search_json[temp[0]] = temp[1];
        }
        // 查看json对象
        console.log(search_json);


        function loadDatas(url, param_json) {
            console.log(url);
            console.log(param_json);
            $.ajax({
                url: url,
                data: param_json,
                success: function (datas) {
                    console.info(datas);

                    var deptListDetails = $("#deptListDetails");
                    var deptListStr = "";
                    for (dept of datas.data.list) {
                        // console.info("得到的部门信息是：" + dept);
                        deptListStr += "" +
                            "<tr class='dept' id='deptId_" + dept.id + "'>\n" +
                            "               <td class='deptId'>" + dept.id + "</td>\n" +
                            "               <td class='deptName'>" + dept.name + "</td>\n" +
                            "               <td class='deptRemark'>" + dept.remark + "</td>\n" +
                            "<td class='option'>" +
                            "<button class='dept_info'>详细信息</button>" +
                            "<button class='dept_update'>修改</button>" +
                            "<button class='dept_delete'>删除</button>" +
                            "</td>" +
                            "</tr>\n";

                    }
                    // console.info(deptListStr);

                    // $("#deptListDetails tr").remove();
                    // 清空表格
                    // deptListDetails.empty();
                    // 添加表格内容
                    // deptListDetails.append(deptListStr);

                    // 或者：将表格html赋值为指定值
                    deptListDetails.html(deptListStr);


                    $("#pageSize").text(datas.data.pageSize);
                    $("#pageNum").text(datas.data.pageNum);
                    $("#pages").text(datas.data.pages);
                    $("#startRow").text(datas.data.startRow);
                    $("#endRow").text(datas.data.endRow);
                    $("#total").text(datas.data.total);
                    $("#prePage_value").text(datas.data.prePage);
                    $("#nextPage_value").text(datas.data.nextPage);

                    //页面加载后动态加载select下拉框
                    var pageSize_num = datas.data.pageSize;
                    var pageNum_num = datas.data.pageNum;
                    var pages_num = datas.data.pages;
                    console.log(pageSize_num);
                    // 拼接下拉框动态元素字符串
                    var select_str_append = "";
                    // select_str_append +=" <div id='selectpage_options'>";


                    for (var i = 1; i <= pages_num; i++) {
                        if (pageNum_num == i) {
                            select_str_append += " <option selected value='" + i + "'>" + i + "</option>";
                        } else {
                            select_str_append += " <option value='" + i + "'>" + i + "</option>";
                        }
                    }
                    // select_str_append+="     </div>";
                    console.log(select_str_append);

                    var select = $("#selectpage");

                    // 实现方式二
                    // select.html(select_str_append);
                    // 清空原有元素数据
                    select.empty();
                    // 填充新内容
                    select.append(select_str_append);
                }
            });
        }

        // 页面加载是执行
        $(function () {

            loadDatas('/hrms/dept/list', {pageNumber: 1, pageSize: 5});

        });


        $(function () {


            var button = $('#deptListDetails');
            console.log(button.html());
            console.info("选择的是：" + button);

            var deptListDetails_tbody = $("#deptListDetails");

            console.info("是否为button_deptinfo" + deptListDetails_tbody);

            //为详细信息按钮绑定事件
            deptListDetails_tbody.on('click', '.dept_info', function () {
                console.log("测试详细信息按钮");

                // 获取表格中该按钮所在行的数据
                var dept_of_id = $(this).parents('tr');
                console.log("this是：" + $(this).text());
                console.info("dept_of_id的html是" + dept_of_id.html());
                console.info("dept_of_id的text是" + dept_of_id.text());

                console.log("id=" + dept_of_id.find('.deptId').text() + "name=" + dept_of_id.find('.deptName').text());
                var id = dept_of_id.find('.deptId').text();

                openNewWindow("/hrms/page/deptInfo?id=" + id);


            });


            //为修改按钮绑定事件
            deptListDetails_tbody.on('click', '.dept_update', function () {
                // 获取表格中该按钮所在行的数据
                var dept_of_id = $(this).parents('tr');
                var id = dept_of_id.find(".deptId").text();
                console.log("测试修改按钮" + id);
                var name = dept_of_id.find('.deptName').text();
                var remark = dept_of_id.find('.deptRemark').text();

                var obj = {id: id, name: name, remark: remark};
                // 查看需要传递的参数
                var str = JSON.stringify(obj);
                console.log(str);

                var param = '?id=' + id + '&name=' + name + '&remark=' + remark;
                openNewWindow("/hrms/page/updateDept" + param);


            });

            //为删除按钮绑定事件
            deptListDetails_tbody.on('click', '.dept_delete', function () {
                var id = $(this).parents('tr').find('.deptId').text();
                console.log("要删除的是id为" + id + "的数据");

                // var test= confirm("是否删除");
                // console.log("测试confirm:"+test);
                // 确认是否删除
                if (confirm("是否删除id为" + id + "的数据？")) {
                    $.ajax({
                        // url: '/hrms/dept/delete?id='+id,
                        url: '/hrms/dept/delete',
                        method: 'post',
                        dataType: 'json',
                        data: {'id': id},
                        success: function (data) {
                            var status = data.status;
                            console.log("操作状态是：" + status);
                            if (status === 200) {
                                alert("操作结果是：" + data.message);
                                // 刷新当前页面
                                location.reload();
                            }
                        }
                    });
                }

            });


        })
        ;

        $(function () {

            console.log("查询状态是：" + $("#queryFlag").val());


            $("#addDept").on('click', function () {
                console.log("新增部门：");
                openNewWindow('/hrms/page/addDept');
            });


            //为查询部门名称按钮添加事件
            $("#queryDept").on('click', function () {
                // 设置查询状态为模糊查询部门名称

                console.log("查询部门名称：");
                var deptName_inuptValue = $("#queryDeptName").val();
                if (!deptName_inuptValue){
                    alert("请输入要查询的部门名称或关键字");
                }else{
                    $("#queryFlag").val("2");
                    console.log("部门名称是：" + deptName_inuptValue);
                    var pageNumber = $("#selectpage").val();
                    var pageSize = $("#pagSizeSelect").val();

                    console.log("pageNUmber是：" + pageNumber);
                    console.log("pageSize是：" + pageSize);
                    if (!pageNumber) {
                        pageNumber = 1;
                    }

                    var like_param = {
                        pageNumber: pageNumber,
                        pageSize: pageSize,
                        likeParams: deptName_inuptValue
                    };
                    loadDatas("/hrms/dept/query", like_param);
                }

            });

        });
    </script>
</head>
<body>
部门列表页面
<br>
<button id="addDept">新增部门</button>

<style>
    #queryDeptName {
        height: 35px;
        width: 200px;
    }
</style>
<label for="queryDeptName"> 查询条件: </label><input type="search" id="queryDeptName" placeholder="请输入部门名称或关键字">
 <button id="queryDept" type="button">查询</button> <button type="button" id="clear_queryDeptName">清空查询条件</button>

<script>

    $(function (){

        // 为清空按钮添加事件
        $("#clear_queryDeptName").on('click',function (){
            console.log("清空按钮事件");
            $("#queryDeptName").val('');
            $("#queryFlag").val('1');
            console.log("查询状态值："+$("#queryFlag").val());
         var param_json= {pageNumber: 1,pageSize: $("#pagSizeSelect").val()};

            loadDatas('/hrms/dept/list',param_json);
        });

    });
</script>
<table id="deptList">
    <thead id="deptListThead">
    <tr>
        <th>部门id</th>
        <th>部门名称</th>
        <th>部门详细信息</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody id="deptListDetails">
    <!--  ajax动态生成表格内容  -->
    </tbody>
</table>
<div>分页信息：</div>
<input type="hidden" id="queryFlag" value="1">
<div>
    显示第 <span id="startRow"></span> 到第 <span id="endRow"></span> 条记录，总共 <span id="total"></span> 条记录。
    分页大小: 每页 <span id="pageSize"></span> 条数据。 第 <span id="pageNum"></span> 页 总共: <span id="pages"></span> 页
</div>

<div>
    <button type="button" id="prePage">上一页</button>
    <button type="button" id="nextPage">下一页</button>

    <lable for="pagSizeSelect"> 选择分页大小：</lable>
    <select name="pagSizeSelect" id="pagSizeSelect">


        <option value="5" selected>5</option>
        <option value="10">10</option>
        <option value="15">15</option>
        <option value="25">25</option>
        <option value="25">25</option>
        <option value="50">50</option>


    </select>


    <label for="page">
        <button type="button" id="toPage"> 跳转到</button>
        第</label>
    <input type="search" id="page" placeholder="请输入要跳转的页码"><span>页</span>
    <label for="selectpage">选择查询第</label>
    <select name="selectpage" id="selectpage">


    </select>
    <span>页</span>
    <!--  隐藏上一页和下一页页码文本储存值  -->
    <div hidden>上一页:<span id="prePage_value"> </span>下一页:<span id="nextPage_value"></span></div>
</div>


</body>
<script>
    $(function () {

        // 给跳转页面输入框添加回车事件
        $("#page").on('keypress', function (event) {

            console.log("按键事件触发！");
            if (event.keyCode == '13') {
                console.log("按了回车键，事件触发！");
                var input_value = $(this).val();
                var pageSize = $("#pagSizeSelect").val();
                console.log("获取的输入值是：" + input_value);



                // 判读值是否为空,为空则重新赋值
               var input_value= $(this).val();
                console.log("input_value是："+input_value);
                var queryFlag_value = $("#queryFlag").val();
                console.log("查询状态是："+queryFlag_value);
                var queryUrl;
                var param_json;

                if (queryFlag_value == 1) {
                    queryUrl = '/hrms/dept/list';
                    param_json = {
                        pageNumber: input_value,
                        pageSize: pageSize
                    };
                }
                if (queryFlag_value == 2) {
                    queryUrl = '/hrms/dept/query';
                    param_json = {
                        pageNumber: input_value,
                        pageSize: pageSize,
                        likeParams: $("#queryDeptName").val()
                    };
                }

                if (!input_value) {

                    if (confirm("输入为空，请您输入正确数值,是否将为您展示首页数据？")) {
                            // 查询首页处理
                        input_value = 1;


                        if (queryFlag_value == 1) {
                            queryUrl = '/hrms/dept/list';
                            param_json = {
                                pageNumber: input_value,
                                pageSize: pageSize
                            };
                        }
                        if (queryFlag_value == 2) {
                            queryUrl = '/hrms/dept/query';
                            param_json = {
                                pageNumber: input_value,
                                pageSize: pageSize,
                                likeParams: $("#queryDeptName").val()
                            };
                        }

                        loadDatas(queryUrl, param_json);
                    }else{
                        console.log("取消分页查询处理：啥都不干");

                    }

                }else{
                    loadDatas(queryUrl, param_json);
                }





            }



        });

        // 给分页大小下拉框添加事件
        $("#pagSizeSelect").on('change', function () {
            console.log("分页大小下拉框添加事件");
            var queryFlag_value = $("#queryFlag").val();
            var queryUrl;
            var param_json;
            if (queryFlag_value == 1) {
                queryUrl = '/hrms/dept/list';
                param_json = {
                    pageNumber: $("#selectpage").val(),
                    pageSize: $("#pagSizeSelect").val()
                };
            }
            if (queryFlag_value == 2) {
                queryUrl = '/hrms/dept/query';
                param_json = {
                    pageNumber: $("#selectpage").val(),
                    pageSize: $("#pagSizeSelect").val(),
                    likeParams: $("#queryDeptName").val()
                };
            }

            loadDatas(queryUrl, param_json);
        });

        // 给选择下拉框添加事件,应该用change事件
        $("#selectpage").on('change', function () {
            console.log("选择下拉列表事件：");
            var queryFlag_value = $("#queryFlag").val();
            var queryUrl;
            var param_json;
            if (queryFlag_value == 1) {
                queryUrl = '/hrms/dept/list';
                param_json = {
                    pageNumber: $("#selectpage").val(),
                    pageSize: $("#pagSizeSelect").val()
                };
            }
            if (queryFlag_value == 2) {
                queryUrl = '/hrms/dept/query';
                param_json = {
                    pageNumber: $("#selectpage").val(),
                    pageSize: $("#pagSizeSelect").val(),
                    likeParams: $("#queryDeptName").val()
                };
            }

            loadDatas(queryUrl, param_json);
        });


        // 给跳转按钮添加事件
        $("#toPage").on('click', function () {

            //获取要跳转到某页的值
            console.log("跳转到页面测试：");
            var toPage = $("#page").val();
            console.log(toPage);
            // 通过ID可以直接获取某个dom元素
            // console.log($(page).val());
            console.log("分页大小是：" + $("#pagSizeSelect").val());


            var queryFlag_value = $("#queryFlag").val();
            var queryUrl;
            var param_json;

            if (queryFlag_value == 1) {
                queryUrl = '/hrms/dept/list';
                param_json = {
                    pageNumber: toPage,
                    pageSize: $("#pagSizeSelect").val()
                };
            }
            if (queryFlag_value == 2) {
                queryUrl = '/hrms/dept/query';
                param_json = {
                    pageNumber: toPage,
                    pageSize: $("#pagSizeSelect").val(),
                    likeParams: $("#queryDeptName").val()
                };
            }



            //如果获取的值为空 ,chu例空值的情形
            if (!toPage) {
                if (confirm("没有输入页码，是否需要查询首页？")) {
                    toPage = 1;

                    if (queryFlag_value == 1) {
                        queryUrl = '/hrms/dept/list';
                        param_json = {
                            pageNumber: toPage,
                            pageSize: $("#pagSizeSelect").val()
                        };
                    }
                    if (queryFlag_value == 2) {
                        queryUrl = '/hrms/dept/query';
                        param_json = {
                            pageNumber: toPage,
                            pageSize: $("#pagSizeSelect").val(),
                            likeParams: $("#queryDeptName").val()
                        };
                    }
                    loadDatas(queryUrl, param_json);
                }else{
                    console.log("啥也不干");
                }

            }else{
                loadDatas(queryUrl, param_json);
            }


        });


        // 上一页按钮添加事件
        $("#prePage").on('click', function () {
            console.log("查询上一页数据：");
            var prePage_value = $("#prePage_value").text();
            var pageSize = $("#pagSizeSelect").val();


            if (prePage_value == 0) {
                alert("已到首页，将展示首页数据");
                prePage_value = 1;
            }
            console.log("查询页码是：" + prePage_value);
            console.log("每页数据大小是：" + pageSize);
            var queryFlag_value = $("#queryFlag").val();
            var queryUrl;
            var param_json;
            console.log("查询状态值："+queryFlag_value);
            if (queryFlag_value == 1) {
                queryUrl = '/hrms/dept/list';
                param_json = {
                    pageNumber: prePage_value,
                    pageSize: $("#pagSizeSelect").val()
                };
            }
            if (queryFlag_value == 2) {
                queryUrl = '/hrms/dept/query';
                param_json = {
                    pageNumber: prePage_value,
                    pageSize: $("#pagSizeSelect").val(),
                    likeParams: $("#queryDeptName").val()
                };
            }

            loadDatas(queryUrl, param_json);
        });
        // 下一页按钮添加事件
        $("#nextPage").on('click', function () {
            console.log("查询下一页数据：");
            var nextPage_value = $("#nextPage_value").text();
            var pageSize = $("#pagSizeSelect").val();
            if (nextPage_value == 0) {
                alert("已到末页了，跳到首页");
                nextPage_value = 1;
            }
            console.log("查询页码是：" + nextPage_value);
            console.log("每页数据大小是：" + pageSize);
            var queryFlag_value = $("#queryFlag").val();
            var queryUrl;
            var param_json;
            if (queryFlag_value == 1) {
                queryUrl = '/hrms/dept/list';
                param_json = {
                    pageNumber: nextPage_value,
                    pageSize: $("#pagSizeSelect").val()
                };
            }
            if (queryFlag_value == 2) {
                queryUrl = '/hrms/dept/query';
                param_json = {
                    pageNumber: nextPage_value,
                    pageSize: $("#pagSizeSelect").val(),
                    likeParams: $("#queryDeptName").val()
                };
            }

            loadDatas(queryUrl, param_json);

        });

    });
</script>
</html>